<template>
    <el-card shadow="never">
        <div slot="header">动态表单(colorPicker)</div>
        <DynamicForm :schema="schema" :formData="formData"></DynamicForm>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </el-card>
</template>

<script>
import CodeTpl from './md/colorPicker.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            schema: {
                properties: {
                    num1: {
                        label: '禁用',
                        widget: 'colorPicker',
                        ui: {
                            disabled: true
                        }
                    },
                    num2: {
                        label: '透明度',
                        widget: 'colorPicker',
                        ui: {
                            showAlpha: true
                        }
                    },
                    num3: {
                        label: '预定义',
                        widget: 'colorPicker',
                        ui: {
                            predefine: [
                                '#ff4500',
                                '#ff8c00',
                                '#ffd700',
                                '#90ee90',
                                '#00ced1',
                                '#1e90ff',
                                '#c71585',
                                'rgba(255, 69, 0, 0.68)',
                                'rgb(255, 120, 0)',
                                'hsv(51, 100, 98)',
                                'hsva(120, 40, 94, 0.5)',
                                'hsl(181, 100%, 37%)',
                                'hsla(209, 100%, 56%, 0.73)',
                                '#c7158577'
                            ]
                        }
                    }
                },
                grid: {
                    row: {
                        gutter: 20
                    },
                    col: {
                        span: 8
                    }
                }
            },
            formData: { 
                num2: 'rgba(19, 206, 102, 0.6)',
                num3: '#ff8c00'
            }
        }
    }
}
</script>

<style>

</style>